<template>
  <view>
    <view style="background-color: #fff;">
      <u-field
        label="门店"
        v-model="form.DoorName"
        :disabled="true"
        readonly
        input-align="right"
        readonly
        @click="showDoorPicker = true"
      />
      <!-- 			  <u-picker
			    mode="selector"
			    v-model="showDoorPicker"
			    :range="doorList"
			    range-key="Value"
			    @confirm="handleBrandChange"
			    @cancel="showBrandPicker = false"
			  ></u-picker> -->

      <u-field
        label="品牌"
        v-model="form.BrandName"
        :disabled="true"
        readonly
        input-align="right"
        readonly
        @click="showBrandPicker = true"
      />
      <!--  <u-picker
				    mode="selector"
				    v-model="showBrandPicker"
				    :range="brandList"
				    range-key="Value"
				    @confirm="handleBrandChange"
				    @cancel="showBrandPicker = false"
				  ></u-picker> -->
      <u-field
        label="产品名称"
        v-model="form.ProductModel"
        :disabled="true"
        readonly
        input-align="right"
        readonly
        @click="showBrandPicker = true"
      />
      <u-field
        label="成交日期"
        :value="timestampToDate(form.DealTime)"
        :disabled="true"
        readonly
        input-align="right"
        readonly
        @click="showBrandPicker = true"
      />
      <u-field
        label="客户姓名"
        v-model="form.NickName"
        :disabled="true"
        readonly
        input-align="right"
        readonly
        @click="showBrandPicker = true"
      />
      <u-field
        label="联系电话"
        v-model="form.NickPhone"
        :disabled="true"
        readonly
        input-align="right"
        readonly
        @click="showBrandPicker = true"
      />
      <u-field
        label="安装地址"
        v-model="form.Address"
        :disabled="true"
        readonly
        input-align="right"
        readonly
        @click="showBrandPicker = true"
      />
      <u-field
        label="详细地址"
        v-model="form.Address"
        :disabled="true"
        readonly
        input-align="right"
        readonly
        @click="showBrandPicker = true"
      />

      <u-field label="唯一码" :disabled="true" input-align="right" v-model="form.SerialNo" />

      <u-form style="padding: 0 24rpx">
        <u-form-item label-position="top" label="收据或发票">
          <view style="display: flex; gap: 24rpx;">
            <u-image
              v-for="(item, index) in InvoicePhotoList"
              :src="getUrl(item)"
              :width="100"
              :height="100"
              :lazy-load="true"
            ></u-image>
          </view>
        </u-form-item>
        <u-form-item label-position="top" label="付款截图">
          <view style="display: flex; gap: 24rpx;">
            <u-image
              v-for="(item, index) in PayPhotoList"
              :src="getUrl(item)"
              :width="100"
              :height="100"
              :lazy-load="true"
            ></u-image>
          </view>
        </u-form-item>
        <u-form-item label-position="top" label="订单合同">
          <view style="display: flex; gap: 24rpx;">
            <u-image
              v-for="(item, index) in OtherPhotoList"
              :src="getUrl(item)"
              :width="100"
              :height="100"
              :lazy-load="true"
            ></u-image>
          </view>
        </u-form-item>
      </u-form>
    </view>

    <view v-if="showApproval" style="padding: 0 24rpx;background-color: #fff;margin-top: 40rpx; ">
      <u-form :model="{}" label-position="top">
        <u-form-item label="审核备注"><u-input v-model="approval.remark" /></u-form-item>
      </u-form>
    </view>

    <view v-if="showApproval" class="fixed-btn">
      <u-button :loading="btnLoading" style="flex: 1;" @click="handleApproval(2)">驳回</u-button>
      <u-button :loading="btnLoading" type="warning" style="flex: 1;" @click="handleApproval(1)">通过</u-button>
    </view>

    <view v-else class="fixed-btn">
      <u-button
        @click="
          $u.route({
            type: 'back'
          })
        "
        style="flex: 1;"
      >
        返回列表
      </u-button>
    </view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
// 这是审核详细页面的接口，通用的审核列表，objectid 30=门店审核 31=单据审核（submittype=1） 32=条码审核(submittype=2) 。
import { timestampToDate } from './dateUtils.js';

const qiniuUrl = 'http://qiniu.warm-ehome.com/';

export default {
  data() {
    return {
      form: {},

      btnLoading: false,

      showAreaPicker: false,
      showDoorPicker: false,
      showBrandPicker: false,
      showDealDatePicker: false,
      showProductPicker: false,
      showPhoneKeyboard: false,

      brandList: [],
      doorList: [],

      showApproval: false,
      InvoicePhotoList: [],
      OtherPhotoList: [],
      PayPhotoList: [],

      approval: {
        // 类型1.单据审核 2.条码审核
        type: '',
        auditstate: '',
        // 1.审核通过 2.驳回
        remark: '',
        // 门店详细
        OrderDetail: {},
        InvoicePhotoList: [],
        PayPhotoList: [],
        OtherPhotoList: []
      }
    };
  },

  onLoad(options) {
    if (options.Id) {
      this.getDetail(options.Id);
      // this.approval.detailId = options.Id;
    }
    if (options.type) {
      this.approval.type = options.type;
    }
    if (options.showApproval && options.showApproval == 'true') {
      this.showApproval = true;
    } else {
      uni.setNavigationBarTitle({
        title: '渠道单据详情'
      });
    }

    this.getBrandList();
  },

  methods: {
    timestampToDate,

    getDetail(id) {
      this.$u
        .post('/Api/MF_ManagerFront/MF_ChannelDealer/PostOrderDetail', {
          OrderId: id
        })
        .then(res => {
          console.log(res);
          const { OrderDetail, BrandList, AuditList, PayPhotoList, OtherPhotoList, InvoicePhotoList } = res;
          this.form = OrderDetail;

          this.PayPhotoList = PayPhotoList ?? [];
          this.OtherPhotoList = OtherPhotoList ?? [];
          this.InvoicePhotoList = InvoicePhotoList ?? [];
        });
    },

    getBrandList() {
      this.$u.post('/Api/MF_ManagerFront/MF_ChannelDealer/PostSelectBrand').then(res => {
        this.brandList = res.BrandList;
      });
    },

    handleBrandChange(e) {
      const index = e[0];
      const brand = this.brandList[index];

      this.form.BrandId = brand.Key;
      this.form.BrandName = brand.Value;

      this.getDoorList(brand.Key);
    },

    handleApproval(state) {
      let me = this;
      this.approval.OrderDetail = this.form;
      this.approval.auditstate = state;
      this.approval.InvoicePhotoList = this.InvoicePhotoList;
      this.approval.PayPhotoList = this.PayPhotoList;
      this.approval.OtherPhotoList = this.OtherPhotoList;

      if (state == 2) {
        if (!this.approval.remark) {
          me.$refs.uToast.show({
            title: '请填写审核备注'
          });
          return;
        }
      }

      console.log(this.approval);

      this.btnLoading = true;

      this.$u
        .post('/Api/MF_ManagerFront/MF_ChannelDealer/PostOrderAudit', this.approval)
        .then(res => {
          const { ResultMessage } = res;

          me.$refs.uToast.show({
            title: ResultMessage,
            url: '/pages/review/index',
            isTab: true
          });
        })
        .finnaly(() => {
          this.btnLoading = false;
        });
    },

    getUrl(key) {
      return qiniuUrl + key;
    }
  }
};
</script>

<style>
page {
  background-color: #f5f5f5;
  padding: 24rpx;
}

.fixed-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding-bottom: 40rpx;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 24rpx;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
</style>
